<template>
   <div class="good-list-wrap">
      <!-- 文章干货 -->
      <div class="hot-course">
        <div class="title-wrap">
          <div class="left-conten">
            <div class="line"></div>
            <span>文章干货</span>
          </div>
          <div class="course-men">
            <!-- 共有<span>12</span>篇文章可阅读> -->
          </div>
        </div>
        <!-- 瀑布流列表 -->
        <div 
          class="waterfalls-flow"
          :style="{
            paddingLeft: ruleFormLocal.pagePadding + 'px',
            paddingRight:  ruleFormLocal.pagePadding + 'px',
          }"
        >
          <!-- 奇盒子 -->
          <div class="column" 
            v-for="(item,index) in waterFallsData" 
            :key="index"
            :style="{
              marginRight: index == 1 ? 0 : ruleFormLocal.listStyle == 1 ? 0:  ruleFormLocal.goodPadding + 'px',
            }"
          >
            <!-- 左右列表 -->
            <template v-if="ruleFormLocal.goodStyle == 2 && ruleFormLocal.listStyle == 1">
              <div 
                class="left-right-content"
                 v-for="(goods,idx) in item" :key="idx"
                :style="{
                  borderRadius: ruleFormLocal.goodBorder == 0 ? '0' : '6px',
                  marginBottom: ruleFormLocal.goodPadding + 'px'
                }"
              >
                <div class="scale">
                  <div 
                    :class="{'img-wrap': true,['scale' + ruleFormLocal.imgScale]: ruleFormLocal.goodStyle == 2}"
                    :style="{
                      borderRadius: ruleFormLocal.goodBorder == 0 ? '0' : '6px',
                    }"
                  >
                    <img :src="goods.file" alt="">
                  </div>
                </div>
                <div class="right-content">
                  <div class="name">
                    {{goods.title}}
                  </div>
                  <div class="desc">
                   {{goods.desc}}
                  </div>
                  <div class="price-op">
                    <div class="type">
                      四六级英语
                    </div>
                    <div class="read">
                      {{goods.created_by}}人阅读
                    </div>
                  </div>
                </div>
              </div>
            </template>
            <template v-else>
              <div class="good-item" 
                v-for="(goods,idx) in item" :key="idx"
                :style="{
                  borderRadius: ruleFormLocal.goodBorder == 0 ? '0' : '6px',
                  marginBottom: ruleFormLocal.goodPadding + 'px'
                }"
              >
                <div 
                  :class="{'img-wrap': true,['scale' + ruleFormLocal.imgScale]: ruleFormLocal.goodStyle == 1}"
                  :style="{
                    borderRadius: ruleFormLocal.goodBorder == 0 ? '0' : '6px',
                  }"
                  
                >
                
                  <img :src="goods.file">
                </div>
                <div 
                  class="name"
                  :style="{
                    height: ruleFormLocal.goodStyle == 1 ? '35.6px' : 'auto'
                  }"
                >
                  {{goods.title}}
                </div>
                <div class="price-wrap">
                  <span class="color">
                    少儿英语
                  </span>
                  <span>
                    1263人已阅读
                  </span>
                </div>
              </div>
            </template>

          </div>
        </div>
      </div>

      <!--  -->
      <option-right v-if="dateFactory.activeBorder">
        <div class="option-wrap">
          <el-form :model="ruleFormLocal" label-width="100px">
            <div class="edit-componet-title">
              商品
            </div>
            <el-form-item label="列表样式" prop="listStyle">
              <el-radio-group v-model="ruleFormLocal.listStyle">
                <el-radio :label="0">一行两个</el-radio>
                <el-radio :label="1">一行一个</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="商品样式" prop="goodStyle">
              <el-radio-group v-model="ruleFormLocal.goodStyle">
                <el-radio :label="0">瀑布流</el-radio>
                <el-radio :label="1">普通列表</el-radio>
                <el-radio :label="2" v-if="ruleFormLocal.listStyle == 1">左右展示列表</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="图片比例" prop="imgScale" v-if="ruleFormLocal.goodStyle == 1 || ruleFormLocal.goodStyle == 2">
              <el-radio-group v-model="ruleFormLocal.imgScale">
                <el-radio :label="0">3:2</el-radio>
                <el-radio :label="1">1:1</el-radio>
                <el-radio :label="2">3:4</el-radio>
                <el-radio :label="3">16:9</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="页面边距" prop="pagePadding">
              <div class="side">
                <el-slider 
                  v-model="ruleFormLocal.pagePadding"
                  :min="0" 
                  :max="30"
                ></el-slider>
                <span>{{ruleFormLocal.pagePadding}}像素</span>
              </div>
            </el-form-item>
            <el-form-item label="商品间距" prop="goodPadding">
              <div class="side">
                <el-slider 
                  v-model="ruleFormLocal.goodPadding"
                  :min="0" 
                  :max="30"
                ></el-slider>
                <span>{{ruleFormLocal.goodPadding}}像素</span>
              </div>
            </el-form-item>
            <el-form-item label="商品倒角" prop="goodBorder">
              <el-radio-group v-model="ruleFormLocal.goodBorder">
                <el-radio :label="0">直角</el-radio>
                <el-radio :label="1">圆角</el-radio>
              </el-radio-group>
            </el-form-item>
            
          </el-form>
        </div>
      </option-right>
    </div>
</template>

<script>
export default {
  name: 'ArticleDryGoods',
  props: {
    dateFactory: Object,
    index: Number,
    diyData: Array,
  },
  components: {
  },
  created() {
    console.log('created',this.ruleForm)
    this.getFilterGood(); // 瀑布流
  },
  data() {
    return {
      goodList: this.dateFactory.goodList,
      waterFallsData: [],
      ruleFormLocal:this.dateFactory.ruleForm,
      currentIndex: 0,
    }
  },
  methods: {
    getFilterGood() {
      if (this.ruleFormLocal.listStyle == 1) {
        this.waterFallsData = [this.goodList]
        return;
      }
      let ouArray = [];
      let jiArray = [];
      this.goodList.forEach((ele,index)=> {
        if ((index + 1) % 2 == 0) {
          ouArray.push(ele);
        } else {
          jiArray.push(ele);
        }
      })
      this.waterFallsData = [jiArray,ouArray]
    }
  },
   watch: {
    ruleFormLocal: {
      handler: function (newValue) {
        console.log(newValue, 'newValuenewValuenewValue')
        this.getFilterGood();
        this.diyData[this.index].ruleForm = newValue
         if (this.ruleFormLocal.page == 'AboutWe') {
           this.$EventBus.$emit('diyFactoryAboutMe', this.diyData)
        } else if (this.ruleFormLocal.page == 'CurriculumSchedule') {
            this.$EventBus.$emit('diyFactoryCurriShe', this.diyData)
        } else if (this.ruleFormLocal.page == 'Home') {
           this.$EventBus.$emit('diyFactory', this.diyData)
        }else if (this.ruleFormLocal.page == 'ArticleDetail') {
           this.$EventBus.$emit('diyFactoryArticleDetail', this.diyData)
        }else if (this.ruleFormLocal.page == 'MyPage') {
           this.$EventBus.$emit('diyFactoryMyPage', this.diyData)
        }
      },
      deep: true,
    }
  },
}
</script>

<style lang="less" scoped>
  .good-list-wrap {
    background: #fff;
  }
  // 操作
  .option-wrap {
    .el-form  {
      .edit-componet-title {
        margin-bottom: 15px;
        padding-bottom: 7px;
        border-bottom: 1px solid #e5e5e5;
        font-size: 14px;
      }
      .el-form-item {
        .side {
          display: flex;
          align-items: center;
          align-items: center;
          .el-slider {
            flex: 1;
          }
          &> span {
            margin-left: 14px;
          }
        }
      }
    }
  }

  // 英语类型 1
  .hot-course {
    display: flex;
    flex-wrap: wrap;
    background-color: #fff;
    width: 358px;
    margin: 0 auto;
    padding-top: 15px;
    .title-wrap {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      .left-conten {
        display: flex;
        align-items: center;
        span {
          font-size: 18px;
          color: #000;
          font-weight: 700;
        }
        .line {
          width: 6px;
          height: 17px;
          background: #64ca38;
          border-radius: 6px;
          margin-right: 7px;
        }
      }
      .course-men {
        font-size: 12px;
        span {
          color: #64ca38;
        }
      }
     
     
    }
  }
	.waterfalls-flow {
    text-align: left;
		display: flex;
    padding: 12px 9px;
    width: 100%;
		.column {
			display: flex;
			flex-direction: column;
			margin-right: 12px;
			flex: 1;
		}
		.column:last-child {
			margin-right: 0;
		}
		.good-item {
			width: 100%;
			background-color: #fff;
			margin-bottom: 12px;
      padding-bottom: 10px;
			.img-wrap {
        width: 100%;
        border-radius: 6px;
        overflow: hidden;
				img {
          width: 100%;
				}
			}
			.name {
				font-size: 12px;
				color: #000;
				padding: 0 3%;
				margin-top: 8px;
        margin-bottom: 4px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2; //行数
        -webkit-box-orient: vertical;
			}
			.price-wrap {
				display: flex;
				align-items: center;
				justify-content: space-between;
        padding: 0 3%;
        color: #5b5b5b;
        font-size: 12px;
        .color {
          color: #64ca38;
        }
			
			}
		}
  }
  .scale0 {
    padding-bottom: 66.7%;
    position: relative;
    img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
  }
  .scale1 {
    padding-bottom: 100%;
    position: relative;
    img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
  }
  .scale2 {
    padding-bottom: 133.3%;
    position: relative;
    img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
  }
  .scale3 {
    padding-bottom: 56.3%;
    position: relative;
    img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
  }
  .el-radio {
    margin-right: 18px;
  }

  // 左右列表
  .left-right-content {
    display: flex;
    align-items: center;
  }
  .left-right-content .scale {
    width: 71px;
    margin-right: 13px;
  }
  .left-right-content  .img-wrap {
    overflow: hidden;
    border-radius: 4px;
  }
  .left-right-content  .img-wrap img {
    width: 100%;
    height: 100%;
  }
  .left-right-content  .right-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
  }
  .left-right-content  .right-content .name {
    font-size: 14px;
    color: #2f2f2f;
    font-weight: 700;
  }
  .left-right-content  .right-content .desc {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2; //行数
    -webkit-box-orient: vertical;
  }
  .left-right-content  .right-content  .price-op {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .left-right-content  .right-content  .price-op .type {
    color: #62af45;
    font-size: 12px;
  }
  .left-right-content  .right-content  .price-op .read {
    font-size: 12px;
    color: #000;
  }
</style>